<template>
    <div class="cart">
        <h4>全部商品</h4>
        <div class="cart-main">
            <div class="cart-th">
                <div class="cart-th1">全部</div>
                <div class="cart-th2">商品</div>
                <div class="cart-th3">单价（元）</div>
                <div class="cart-th4">数量</div>
                <div class="cart-th5">小计（元）</div>
                <div class="cart-th6">操作</div>
            </div>
            <div class="cart-body">
                <ul
                    class="cart-list"
                    v-for="(cartInfo, index) in cartInfoList"
                    :key="cartInfo.id"
                >
                    <li class="cart-list-con1">
                        <input
                            type="checkbox"
                            name="chk_list"
                            :checked="cartInfo.isChecked == 1 ? true : false"
                            @change="updateChecked(cartInfo, $event)"
                        />
                    </li>
                    <li class="cart-list-con2">
                        <img :src="cartInfo.imgUrl" />
                        <div class="item-msg">
                            {{ cartInfo.skuName }}
                        </div>
                    </li>
                    <li class="cart-list-con4">
                        <span class="price"> {{ cartInfo.skuPrice }} </span>
                    </li>
                    <li class="cart-list-con5">
                        <a
                            href="javascript:void(0)"
                            class="mins"
                            @click="handler('minus', -1, cartInfo)"
                            >-</a
                        >
                        <input
                            autocomplete="off"
                            type="text"
                            :value="cartInfo.skuNum"
                            minnum="1"
                            class="itxt"
                            @change="
                                handler(
                                    'change',
                                    $event.target.value * 1,
                                    cartInfo
                                )
                            "
                        />
                        <a
                            href="javascript:void(0)"
                            class="plus"
                            @click="handler('add', 1, cartInfo)"
                            >+</a
                        >
                    </li>
                    <li class="cart-list-con6">
                        <span class="sum">{{
                            cartInfo.skuPrice * cartInfo.skuNum
                        }}</span>
                    </li>
                    <li class="cart-list-con7">
                        <a
                            class="sindelet"
                            @click="deleteCartById(cartInfo.skuId)"
                            >删除</a
                        >
                        <br />
                        <a href="#none">移到收藏</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="cart-tool">
            <div class="select-all">
                <!-- this.cartInfoList.length > 0是因为数组为空every方法会返回true -->
                <!-- 也可以直接写this.cartInfoList.length -->
                <input
                    class="chooseAll"
                    type="checkbox"
                    :checked="isAllChecked && this.cartInfoList.length > 0"
                    @change="updateAllCartChecked"
                />
                <span>全选</span>
            </div>
            <div class="option">
                <a @click="deleteAllCheckedCart">删除选中的商品</a>
                <a href="#none">移到我的关注</a>
                <a href="#none">清除下柜商品</a>
            </div>
            <div class="money-box">
                <div class="chosed">已选择 <span>0</span>件商品</div>
                <div class="sumprice">
                    <em>总价（不含运费） ：</em>
                    <i class="summoney">{{ totalPrice }}</i>
                </div>
                <div class="sumbtn">
                    <a class="sum-btn" @click="$router.push('/trade')">结算</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex"
// 节流
import throttle from "lodash/throttle"

export default {
    name: "ShopCart",
    mounted() {
        this.getData()
    },
    methods: {
        // 获取个人购物车
        getData() {
            // 派发事件获取购物车列表数据的事件
            this.$store.dispatch("shopCart/getCartList")
        },
        // 修改某一个产品的个数 节流
        handler: throttle(async function (type, disNum, cartInfo) {
            // type区分这三个元素
            // disNum变化量 -1 1 以及最终变化量
            // cartInfo哪一个产品
            switch (type) {
                // 加号
                case "add":
                    disNum = 1
                    break
                case "minus":
                    // 判断该产品是否大于1
                    // 产品个数小于等于1,传递给服务器个数为0原封不动
                    disNum = cartInfo.skuNum > 1 ? -1 : 0
                    break
                case "change":
                    if (isNaN(disNum) || disNum < 1) {
                        disNum = 0
                    } else {
                        // 变化量 用户输入 - 产品原来的个数
                        disNum = parseInt(disNum) - cartInfo.skuNum
                    }
                    break
            }
            //  派发action
            try {
                // 代表修改成功
                await this.$store.dispatch("detail/addOrUpdateShopCart", {
                    skuId: cartInfo.skuId,
                    skuNum: disNum,
                })
                this.getData()
            } catch (error) {}
        }, 500),
        // 删除某个商品
        async deleteCartById(skuId) {
            try {
                // 派发actions请求
                // 如果删除成功再次发请求获取新的数据进行展示
                await this.$store.dispatch("shopCart/deleteCartById", skuId)
                this.getData()
            } catch (error) {
                alert(error.messages)
            }
        },
        // 修改某个商品的状态
        async updateChecked(cartInfo, event) {
            try {
                // 如果修改成功，再次获取服务器的数据
                // 带给服务器的参数isChecked 不是布尔值 应该是0 或 1
                let isChecked = event.target.checked ? "1" : "0"
                await this.$store.dispatch("shopCart/updateCheckedById", {
                    skuId: cartInfo.skuId,
                    isChecked,
                })
                this.getData()
            } catch (error) {
                alert(error.messages)
            }
        },
        // 删除全部选中的产品
        // 没办法收集到有用的数据
        async deleteAllCheckedCart() {
            try {
                // 派发一个action
                await this.$store.dispatch("shopCart/deleteAllCheckedCart")
                // 再次发送网络请求
                this.getData()
            } catch (error) {
                alert(error.messages)
            }
        },
        // 修改全部产品的选中状态
        async updateAllCartChecked(event) {
            try {
                let isChecked = event.target.checked ? "1" : "0"
                // 派发action
                await this.$store.dispatch(
                    "shopCart/updateAllCartIsChecked",
                    isChecked
                )
                this.getData()
            } catch (error) {
                alert(error.messages)
            }
        },
    },
    computed: {
        ...mapGetters("shopCart", ["cartList"]),
        // 计算购物车数据
        cartInfoList() {
            return this.cartList.cartInfoList || []
        },
        // 计算产品总价
        totalPrice() {
            let sum = 0
            this.cartInfoList.forEach((item) => {
                sum += item.skuNum * item.skuPrice
            })
            return sum
        },
        // 判断底部复选框是否选中（全选框 ）
        isAllChecked() {
            // 遍历cartInfoList里的isChecked查看是否为1
            return this.cartInfoList.every(
                (currentValue) => currentValue.isChecked === 1
            )
        },
    },
}
</script>

<style lang="less" scoped>
.cart {
    width: 1200px;
    margin: 0 auto;

    h4 {
        margin: 9px 0;
        font-size: 14px;
        line-height: 21px;
    }

    .cart-main {
        .cart-th {
            background: #f5f5f5;
            border: 1px solid #ddd;
            padding: 10px;
            overflow: hidden;

            & > div {
                float: left;
            }

            .cart-th1 {
                width: 25%;

                input {
                    vertical-align: middle;
                }

                span {
                    vertical-align: middle;
                }
            }

            .cart-th2 {
                width: 25%;
            }

            .cart-th3,
            .cart-th4,
            .cart-th5,
            .cart-th6 {
                width: 12.5%;
            }
        }

        .cart-body {
            margin: 15px 0;
            border: 1px solid #ddd;

            .cart-list {
                padding: 10px;
                border-bottom: 1px solid #ddd;
                overflow: hidden;

                & > li {
                    float: left;
                }

                .cart-list-con1 {
                    width: 15%;
                }

                .cart-list-con2 {
                    width: 35%;

                    img {
                        width: 82px;
                        height: 82px;
                        float: left;
                    }

                    .item-msg {
                        float: left;
                        width: 150px;
                        margin: 0 10px;
                        line-height: 18px;
                    }
                }

                .cart-list-con3 {
                    width: 10%;

                    .item-txt {
                        text-align: center;
                    }
                }

                .cart-list-con4 {
                    width: 10%;
                }

                .cart-list-con5 {
                    width: 17%;

                    .mins {
                        border: 1px solid #ddd;
                        border-right: 0;
                        float: left;
                        color: #666;
                        width: 6px;
                        text-align: center;
                        padding: 8px;
                    }

                    input {
                        border: 1px solid #ddd;
                        width: 40px;
                        height: 33px;
                        float: left;
                        text-align: center;
                        font-size: 14px;
                    }

                    .plus {
                        border: 1px solid #ddd;
                        border-left: 0;
                        float: left;
                        color: #666;
                        width: 6px;
                        text-align: center;
                        padding: 8px;
                    }
                }

                .cart-list-con6 {
                    width: 10%;

                    .sum {
                        font-size: 16px;
                    }
                }

                .cart-list-con7 {
                    width: 13%;
                    a {
                        color: #666;
                    }
                }
            }
        }
    }

    .cart-tool {
        overflow: hidden;
        border: 1px solid #ddd;

        .select-all {
            padding: 10px;
            overflow: hidden;
            float: left;

            span {
                vertical-align: middle;
            }

            input {
                vertical-align: middle;
            }
        }

        .option {
            padding: 10px;
            overflow: hidden;
            float: left;

            a {
                float: left;
                padding: 0 10px;
                color: #666;
            }
        }

        .money-box {
            float: right;

            .chosed {
                line-height: 26px;
                float: left;
                padding: 0 10px;
            }

            .sumprice {
                width: 200px;
                line-height: 22px;
                float: left;
                padding: 0 10px;

                .summoney {
                    color: #c81623;
                    font-size: 16px;
                }
            }

            .sumbtn {
                float: right;

                a {
                    display: block;
                    position: relative;
                    width: 96px;
                    height: 52px;
                    line-height: 52px;
                    color: #fff;
                    text-align: center;
                    font-size: 18px;
                    font-family: "Microsoft YaHei";
                    background: #e1251b;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>